<script setup lang="ts">
  import * as echarts from 'echarts'
  import { onMounted, reactive, ref, watch } from 'vue'

  import { OpenBarType } from '/@/enums/pageEnum'
  const currentWidth = document.documentElement.clientWidth - 300

  const props = defineProps({
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: 'visits',
    },
    xAxis: {
      type: Array,
      default: () => [],
    },
  })

  const chartDom = ref()
  // var chartDom = document.getElementById('main');
  let option = reactive({})

  const initOption = () => {
    const xAxisData = ref<any>([])
    const seriesData = ref<any>([])
    const dataList = reactive({})

    const keys = Object.keys(props.data)
    let lastKey = keys[keys.length - 1]

    for (let key in props.data) {
      if (props.data.hasOwnProperty(key)) {
        seriesData.value.push({
          name: key,
          type: 'bar',
          stack: 'one',
          data: props.data[key].map((item: any) => item[props.type]),
        })
      }
      // if (key === lastKey) {
      //   seriesData.value[seriesData.value.length - 1].label = {
      //     show: true,
      //     position: 'top',
      //     formatter: (params) => {
      //       let total = 0
      //       for (let key1 in props.data) {
      //         if (props.data.hasOwnProperty(key1)) {
      //           total += props.data[key1][params.dataIndex][props.type]
      //         }
      //       }
      //       return total
      //     },
      //   }
      // }
    }

    var emphasisStyle = {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.3)',
      },
    }

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params) {
          var result = OpenBarType[props.type] + '<br/>'
          params.forEach(function (item) {
            if (item.value > 0) {
              result += item.marker + item.seriesName + ': ' + item.value + '<br/>'
            }
          })
          return result
        },
      },
      xAxis: {
        data: props.xAxis,
        name: '访问时间',
        axisLine: { onZero: true },
        splitLine: { show: false },
        splitArea: { show: false },
      },
      yAxis: {
        name: '访问次数',
      },
      grid: {
        bottom: 50,
      },
      series: seriesData.value,
    }
  }

  const refresh = () => {
    if (props.data) {
      initOption()
      var myChart = echarts.init(chartDom.value)
      option && myChart.setOption(option, true)
    }
  }

  watch(
    () => props.data,
    () => {
      if (Object.keys(props.data).length) {
        refresh()
      }
    },
    {
      immediate: true,
    },
  )
  watch(
    () => props.type,
    () => {
      if (Object.keys(props.data).length) {
        refresh()
      }
    },
    {
      immediate: true,
    },
  )
</script>
<template>
  <!-- <a-button type="primary" @click="refresh()">刷新</a-button> -->
  <div id="main" ref="chartDom" :style="{ width: currentWidth + 'px', height: '800px' }"></div>
</template>
<style lang="less" scoped></style>
